<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>涡流数据</el-breadcrumb-item>
      <el-breadcrumb-item>数据查询</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row class="queryInfo">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-select v-model="queryInfo.outages" multiple filterable reserve-keyword placeholder="请选择大修轮次" size="mini" @change="getTanks">
              <el-option v-for="outage in all_outages" :key="outage.id" :label="outage.outage" :value="outage.outage"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="queryInfo.tanks" multiple filterable reserve-keyword placeholder="请选择容器" size="mini">
              <el-option v-for="tank in all_tanks" :key="tank" :label="tank" :value="tank"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="queryInfo.codes" multiple filterable reserve-keyword placeholder="请选择信号类型" size="mini">
              <el-option v-for="code in all_codes" :key="code" :label="code" :value="code"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" @click="getEtdata">搜索</el-button>
            <el-button type="primary" size="mini" @click="export_excel">导出excel</el-button>
          </el-col>
        </el-row>
      </el-row>

      <!-- <el-collapse v-model="isCollapse" @change="handleCollapse" accordion>
        <el-collapse-item title="更多查询条件" name="1">
          <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkBaseAll" @change="handleCheckAllChange">全选</el-checkbox> -->
      <!-- <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
          </el-checkbox-group>
          <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
        </el-collapse-item>
      </el-collapse> -->

      <el-table :data="etdatas" style="width: 100%" border highlight-current-row cell-class-name="tableCell" size="mini">
        <el-table-column type="index" label="#" width="60"> </el-table-column>
        <el-table-column prop="outage" label="大修" width="60"> </el-table-column>
        <el-table-column prop="tank" label="容器" width="100"> </el-table-column>
        <el-table-column prop="zone" label="ZONE" width="60"> </el-table-column>
        <el-table-column prop="row" label="ROW" width="52"> </el-table-column>
        <el-table-column prop="col" label="COL" width="50"> </el-table-column>
        <el-table-column prop="code" label="CODE" width="60"> </el-table-column>
        <el-table-column prop="cal" label="CAL" width="130"> </el-table-column>
        <el-table-column prop="volt" label="VOLT" width="70"> </el-table-column>
        <el-table-column prop="ph" label="PH" width="60"> </el-table-column>
        <el-table-column prop="ch" label="CH" width="80"> </el-table-column>
        <el-table-column prop="percent" label="%" width="50"> </el-table-column>
        <el-table-column prop="dist" label="DIST" width="60"> </el-table-column>
        <el-table-column prop="probe" label="PROBE" width="70"> </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[50, 100, 200, 500]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      all_outages: [],
      all_tanks: ['ABP301RE', 'ABP401RE', 'ABP302RE', 'AHP601RE', 'AHP602RE', 'AHP701RE', 'AHP702RE'],
      all_codes: [],
      queryInfo: {
        outages: [],
        tanks: [],
        codes: [],
        pagenum: 1,
        pagesize: 100
      },
      total: 100,
      etdatas: [],
      isCollapse: ''
    }
  },
  created() {
    this.getBaseinfo()
  },
  methods: {
    async getBaseinfo() {
      const { data: res } = await this.$http.get('baseinfo/etdatainfo/')
      if (res.meta.status !== 200) {
        return this.$message.error('获取基本数据失败，请联系管理员！')
      }
      // console.log(res)
      this.all_outages = res.data.outages
      this.all_tanks = res.data.tanks
      this.all_codes = res.data.signals
    },
    //   查询涡流数据方法
    async getEtdata() {
      const { data: res } = await this.$http.post('etdata/getetdata/', this.queryInfo)
      if (res.meta.status === 200) {
        this.etdatas = res.data.etdatas
        this.total = res.data.total
        this.queryInfo.pagenum = res.data.pagenum
        return this.$message.success('查询涡流数据成功')
      } else if (res.meta.status === 201) {
        this.etdatas = []
        this.total = 0
        this.queryInfo.pagenum = 1
        return this.$message.info('未查询到相关数据')
      }
      this.etdatas = []
      this.total = 0
      this.pagenum = 1
      return this.$message.error('查询涡流数据失败')
    },
    //  根据选择的大修轮次查询容器
    async getTanks() {
      const { data: res } = await this.$http.get('etdata/gettanks2/', { params: { outages: this.queryInfo.outages.join('-') } })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取容器列表失败')
      }
      this.all_tanks = res.data.tanks
    },
    // 每页显示的数量变化时的处理函数
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getEtdata()
    },
    // 当前请求的页码变化时的处理函数
    handleCurrentChange(pagenum) {
      this.queryInfo.pagenum = pagenum
      this.getEtdata()
    },
    // 处理折叠的函数
    async handleCollapse(val) {
      console.log(val)
      if (val) {
      }
    },
    // 查询结果导出excel
    async export_excel() {
      console.log('导出excel')
      const { data: res } = await this.$http.post('etdata/exportexcel/', this.queryInfo)
      if (res.meta.status === 200) {
        window.open(res.data.excel_url)
        return this.$message.success('涡流数据导出到excel成功！')
      } else {
        this.$message.error('涡流数据导出到excel失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.queryInfo {
  .el-select {
    width: 100% !important;
  }
}

.el-collapse-item__header {
  color: rgb(0, 51, 255) !important;
  cursor: pointer;
}
.el-collapse-item__header:hover {
  color: rgb(0, 51, 255) !important;
}
</style>
